<template>
	<view class="goods-list">
		<view v-for="(goods,i) in goodslist" :key="i" @click="gotoDetail(goods)">
		<!-- 使用组件替代 -->
		<my-goods :goods="goods"></my-goods>
			<!-- <view class="goods-item"> -->
				<!--左侧盒子-->
				<!-- <view class="goods-item-left">
					<image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
				</view> -->
				<!--右侧盒子-->
				<!-- <view class="goods-item-right"> -->
					<!--商品的名字-->
					<!-- <view class="goods-name">{{goods.goods_name}}</view> -->
					<!-- <view class="goods-info-box"> -->
						<!-- <view class="goods-price">¥{{goods.goods_price}}</view> -->
					<!-- </view> -->
				<!-- </view> -->
			<!-- </view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//请求参数对象 ,...有问题
				queryObj:{
					query:'',//请求的参数11
					cid:'5',//请求的参数
					pagenum:3,//默认显示第一页数据
					pagesize:10 //每页默认显示10条数据
				},
				
				query:'',//请求的参数
				cid:'5',//请求的参数
				pagenum:1,//默认显示第一页数据
				pagesize:10, //每页默认显示10条数据
				
				//商品列表数据
				goodslist:[],
				total:0,
				//默认图片地址
				defaultPic:'https://p7.itc.cn/q_70/images03/20231112/9adfef5aaa934779b648ddfd5340dbd1.jpeg',
				isloading:false, //节流阀  防止多次重复请求网络
				
			};
		},
		onLoad(options) {//页面跳转时带过来的数据  
			//...queryObj对象有问题
			this.queryObj.query=options.query || ''
			this.queryObj.cid=options.cid || ''
			
			this.query=options.query || ''
			this.cid=options.cid || ''
		
			this.getGoodslist()
		},
		methods:{
			getGoodslist(cb){
				this.isloading=true //打开节流阀
				
				uni.request({
					//url:'https://api-hmugo-web.itheima.net/api/public/v1/goods/search?'+this.queryObj,
					url:'https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query='+this.query+'&cid='+this.cid+"&pagenum="+this.pagenum+"&pagesize="+this.pagesize,
					
					// url:'https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query=&cid=5&pagenum=2&pagesize=10,
					method:'GET',
				
					success:(res)=>{
						console.log(res)
						//this.goodslist=res.data.message.goods
						//让原有数据和新数据全部放在goodslist
						this.goodslist=[...this.goodslist,...res.data.message.goods]
						this.total=res.data.message.total
						this.isloading=false //关闭节流阀
						cb && cb()//cb不为null，就执行传递过来的cb函数
						
					},
					fail() {
						uni.$showMsg('请求失败！！')
					}
					
				})
			},
			gotoDetail(goods){//跳转商品详情页
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods.goods_id
				})
			}
		},
		onReachBottom() {//监听页面的上拉触底行为
			if(this.pagenum * this.pagesize >= this.total){
				 uni.$showMsg("数据加载完毕")
				 return
			} 
			uni.$showMsg("触发上拉加载")
			if(this.isloading)return
			//让页面值自增加 1
			//this.queryObj.pagenum++
			
			this.pagenum++
			this.getGoodslist()
		},
		onPullDownRefresh() {//下拉刷新的回调函数
			//重置关键数据
			this.pagenum=1
			this.total=0
			this.isloading=false
			this.goodslist=[]
			//重新发起请求
			this.getGoodslist(()=>uni.stopPullDownRefresh())//传递关闭下拉刷新框的 函数
		},
		
		
		
	}
</script>

<style lang="scss">
// .goods-list{
// 	.goods-item{
// 		display: flex;
// 		padding: 10px 5px;
// 		border-bottom: 1px solid #f0f0f0;
// 		.goods-item-left{
// 			margin-right: 5px;
// 			.goods-pic{
// 				width: 100px;
// 				height: 100px;
// 				display: block;
				
// 			}
// 		}
// 		.goods-item-right{
// 			display: flex;
// 			flex-direction: column;
// 			justify-content: space-between;
// 			.goods-name{
// 				font-size: 13px;
// 			}
// 			.goods-info-box{
// 				.goods-price{
// 					font-size: 16px;
// 					color: #c00000;
// 				}
// 			}
// 		}
// 	}
	
// }
</style>
